<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="js/common.js"></script>
    <script src="lib/html5shiv/html5shiv.min.js"></script>
    <script src="lib/respond.js/respond.js"></script>
    <script src="lib/jquery/jquery.js"></script>
    <script src="lib/bootstrap/js/bootstrap.js"></script>
    <script src="js/template-native.js"></script>
    <link href="css/header.css" rel="stylesheet">
    <link href="css/nav.css" rel="stylesheet">
    <link rel="stylesheet" href="css/other_list.css"/>
    <!--<script src="js/index.js"></script>-->
</head>
<body>
    <div class="main_page">
        <div class="hongman_header">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <input type="text" value="红旅动漫"/>
                    <a class="navbar-brand glyphicon glyphicon-search" href="#"></a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <img src="image/logo.PNG" alt=""/>
                        <li><a href="#">动漫列表</a></li>
                        <li><a href="#">专题列表</a></li>
                        <!--<li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>-->
                    </ul>
                </div>
            </div>
        </div>
        <div class="hongman_banner">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- pageControl 页码展示 data-target="#carousel-example-generic"指定操作的是哪一个轮播图-->
                <!--data-slide-to="0"控制指定索引的图片-->
                <!--data-target="#carousel-example-generic"说明当前操作的是哪一个轮播图组件-->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <<!--li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="3"></li>-->
                </ol>
                <style>
                    .m_img img {
                        width:100%;
                    }
                </style>
                <!-- 图片内容 -->
                <div class="carousel-inner" role="listbox">
                    <!-- <div class="item active">
                         <a href="#" class="m_img hidden-lg hidden-sm hidden-md">
                             <img src="images/slide_01_640x340.jpg" alt="...">
                         </a>
                         <a href="#" class="pc_img hidden-xs" style="background-image: url('images/slide_01_2000x410.jpg');background-repeat: no-repeat;"></a>
                     </div>
                     <div class="item">
                         <a href="#" class="m_img hidden-lg hidden-sm hidden-md">
                             <img src="images/slide_02_640x340.jpg" alt="...">
                         </a>
                         <a href="#" class="pc_img hidden-xs" style="background-image: url('images/slide_02_2000x410.jpg');background-repeat: no-repeat;"></a>
                     </div>
                     <div class="item">
                         <a href="#" class="m_img hidden-lg hidden-sm hidden-md">
                             <img src="images/slide_03_640x340.jpg" alt="...">
                         </a>
                         <a href="#" class="pc_img hidden-xs"  style="background-image: url('images/slide_03_2000x410.jpg');background-repeat: no-repeat;"></a>
                     </div>
                     <div class="item">
                         <a href="#" class="m_img hidden-lg hidden-sm hidden-md">
                             <img src="images/slide_04_640x340.jpg" alt="...">
                         </a>
                         <a href="#" class="pc_img hidden-xs"  style="background-image: url('images/slide_04_2000x410.jpg');background-repeat: no-repeat;"></a>
                     </div>-->
                    ...
                </div>

                <!-- 左右点击展示上一张和下一张图片的按钮   data-slide="prev" 控制操作方式：上一张/下一张-->
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <div class="hongman_nav">
            <div class="container">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active col-xs-3  "><a href="#home" aria-controls="home" role="tab" data-toggle="tab">新增连载</a></li>
                    <li role="presentation" class="col-xs-3  "><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">新增完结</a></li>
                    <li role="presentation" class="col-xs-3  "><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">推荐连载</a></li>
                    <li role="presentation" class="col-xs-3  "><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">推荐完结</a></li>
                </ul>

                <div class="tab-content">
                    <script type="text/template" id="mianTemp">
                        <% for(var i = 0;i<item.length;i++){ %>
                        <li class="m_img col-xs-6 col-sm-6 col-md-6" style="display: inline-block;text-align: center">
                            <a href="#"><img src="image/dm1.jpg" alt=""/><p><%=item[i].update%></p></a>
                            <span><%=item[i].name%></span>
                        </li>
                        <% } %>
                    </script>
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <ul class="items">
                            <!--<a href="#" class="item col-lg-4 col-md-6 col-sm-12">
                                <div class="item_left col-lg-7 col-md-7 col-sm-7">
                                    <p>新手体验1002期</p>
                                    <div class="col-lg-6 col-md-6 col-sm-6 text_left">
                                        <p>起投全额(元)</p>
                                        <p>0.01万</p>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 text_right">
                                        <p>已投标人数(元)</p>
                                        <p>22</p>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 text_left">
                                        <p>借款期限</p>
                                        <p>10天</p>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 text_right">
                                        <p>已投标总额</p>
                                        <p>2000</p>
                                    </div>
                                </div>
                                <div class="item_right col-lg-5 col-md5 col-sm-5">
                                    <span>8</span><span>%</span>
                                </div>
                            </a>
                        </ul>-->
                    </div>
                    <div role="tabpanel" class="tab-pane" id="profile">...</div>
                    <div role="tabpanel" class="tab-pane" id="messages">...</div>
                    <div role="tabpanel" class="tab-pane" id="settings">...</div>
                </div>
            </div>
        </div>
    </div>
    <div class="other_list">
        <div class="other_list_head">
                <header><div class="container-indicators"><span class="glyphicon glyphicon-menu-left"></span>连载动漫</div></header>
        </div>
        <div class="content">
        </div>
        <script type="text/template" id="list_one">
            <%for(var i=0;i<item.length;i++){%>
            <div class="item-one">
                <div class="container">
                <div class="img col-xs-3">
                    <a><img src="<%=item[i].img%>" alt=""/></a>
                </div>
                <div class="info col-xs-9">
                    <h4><b><%=item[i].name%></b></h4>
                    <p><%=item[i].episode%></p>
                    <p><%=item[i].updateTime%></p>
                    <p>下载次数:<%=item[i].downloadCount%></p>
                </div>
                </div>
            </div>
            <%}%>
        </script>
        <script type="text/template" id="list_two">
            <%for(var key in item){%>
            <div class="item-two">
                <a class="img"><img src="<%=item[key].img%>" alt=""/></a>
                <div class="info"><%=item[key].title%></div>
            </div>
            <%}%>
        </script>
    </div>
</body>
<script type="text/template" id="bannerTemp">
    <% for(var key in item){ %>
    <div class="item <%=key==0?'active':''%>">
        <a href="#">
            <img src="<%=item[key].img%>" alt="...">
        </a>
    </div>
    <% }%>
</script>
<script>
    $(function(){
        $.ajax({
            type:"GET",
            //url:"https://api.douban.com/v2/movie/coming_soon",
            //url:"https://api.douban.com/v2/movie/in_theaters",
            url:"http://192.168.127.222:9090/api/getlunbo",
            data:"",
            /*dataType:"jsonp",*/
            success:function(data){
                var html = template("bannerTemp",{item:data});
                $(".hongman_banner .carousel-inner").html(html);
            }
        })
        getMianInfo();
        function getMianInfo(num){
            var num = num?num:1;
            $.ajax({
                type:"GET",
                //url:"https://api.douban.com/v2/movie/coming_soon",
                //url:"https://api.douban.com/v2/movie/in_theaters",
                url:"http://192.168.127.222:9090/api/gethometab/"+num,
                data:"",
                /*dataType:"jsonp",*/
                success:function(data){
                    var html = template("mianTemp",{item:data});
                    $(".hongman_nav .tab-pane").eq(num-1).html(html);
                }
            })
        }

        function getAjax(callback,url){
            $.ajax({
                type:"GET",
                url:url,
                data:"",
                /*dataType:"jsonp",*/
                success:function(data){
                    callback(data);
                }
            })
        }

        //获取操作对象
        var nav = document.querySelector(".hongman_nav .nav-tabs").children;
        var navbarToggle = $(".hongman_header .navbar-toggle");
        var navbarCollapse = $(".hongman_header .navbar-collapse");
        for (var i = 0; i < nav.length; i++) {
            //移除关闭状态
            nav[i].index = i;
            console.log(nav[i]);
            itcast.tap(nav[i],function(e){
                navbarToggle.addClass("collapsed");
                //关闭拓展列表
                navbarToggle.attr("aria-expanded",false)
                navbarCollapse.removeClass("in");
                navbarCollapse.attr("aria-expanded",false)
                var number = e.target.index?e.target.index+1:e.target.parentNode.index+1;
                console.log(number);
                getMianInfo(number);
            })
        }

        //获取操作对象
        var navbarNar = document.querySelectorAll(".hongman_header .navbar-nav li");
        var otherList = $(".other_list .content")
        for (var i = 0; i < navbarNar.length; i++) {
            navbarNar[i].index = i;
            itcast.tap(navbarNar[i],function(e){
                $(".main_page").css({display:"none"});
                $(".other_list").css({display:"block"});
                var number = e.target.index?e.target.index:e.target.parentNode.index;
                if(number==0) {
                    var url ="http://192.168.127.222:9090/api/getlianzai";
                    var tempID = "list_one";
                }else{
                    var url ="http://192.168.127.222:9090/api/gettopics";
                    var tempID = "list_two";
                }
                getAjax(function(data){

                    //封装模板
                    var html = template(tempID,{item:data});
                    otherList.html(html);
                },url);
            })

        }
        /* navbarNar.on("click",function(){
         $(".main_page").css({display:"none"});
         $(".other_list").css({display:"block"});
         console.log($(this).index());
         if($(this).index()==0) {
         var url ="http://192.168.127.222:9090/api/getlianzai";
         var tempID = "list_one";
         }else{
         var url ="http://192.168.127.222:9090/api/gettopics";
         var tempID = "list_two";
         }
         //1.获取数据
         getAjax(function(data){

         //封装模板
         var html = template(tempID,{item:data});
         otherList.html(html);
         },url);
         })*/

        //专题页返回按钮
        var otherListReturn = document.querySelector(".other_list header span");
        itcast.tap(otherListReturn,function(){
            $(".main_page").css({display:"block"});
            $(".other_list").css({display:"none"});
        })
    })

</script>
</html>